<template>
  <div class="home">

    <view class="section">
<!--      <view class="section__title"></view>-->
      <picker mode="multiSelector" @columnchange="groupPickerChange" :value="mulIndex" :range="mulArr">
        <view class="picker">
          学习阶段：<span>{{mulArr[0][mulIndex[0]]}} {{mulArr[1][mulIndex[1]]}}</span>
        </view>
      </picker>
    </view>

    <div class="menu">
    <button @click="toExam">考试通关</button>
    <button @click="toPractice">魔鬼训练</button>
    <button @click="toAnnouncement">公告</button>
  </div>

  </div>
</template>

<script>
//引入公共数据，用于取存
import globalStore from "../../stores/global-store";
export default {
  data () {
    return {
      mulIndex: [0,0],
      mulArr:[],
      // 假设json为后端返回的数据
      json: [{group:'小学',grade:['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']},
        {group:'初中',grade:['初一','初二', '初三']},
        {group:'高中',grade:['高一','高二','高三']}]
    }
  },
  methods: {
    groupPickerChange(e){
      // 列的值改变时触发   我这里是三列：车子类型  品牌名称  车型
      console.log('修改的列', e.target.column, '值为', e.target.value);
      // 监听用户操作，改变mulIndex的值
      this.mulIndex[e.target.column] = e.target.value;
      // mulArr[0]的值是不会随用户操作变更的，因此不需要改变
      // mulArr[1]的值是由 mulIndex[0]的值决定的
      this.mulArr.splice(1,1,this.json[this.mulIndex[0]].grade);
      //存入storess的公共数据中
      globalStore.state.examType[0] =  this.mulArr[0][this.mulIndex[0]];
      globalStore.state.examType[1] =  this.mulArr[1][this.mulIndex[1]];
      console.log(globalStore.state.examType[0]);
      console.log(globalStore.state.examType[1])
    },
    toExam () {
      wx.navigateTo({
        url: '/pages/exam/main'
      })
    },
    toPractice () {
      wx.navigateTo({
        url: '/pages/practice/main'
      })
    },
    toAnnouncement () {
      wx.navigateTo({
        url: '/pages/announcement/main'
      })
    }
  },
  created() {
    // 初始化picker默认值
    this.mulArr[0] = this.json.map(function(v){return v.group});
    this.mulArr[1] = this.json[this.mulIndex[0]].grade;
  }
}
</script>

<style scoped>
.home {
  /*position: relative;*/
  width: 100%;
  height: 100%;
  background-image:url('');
  background-repeat:no-repeat;
  background-size:100% 100%;
}
picker {
  /*background-color: #dedede;*/
  font-weight: bold;
  padding: 10px 10px;
}
picker view span {
  background-color: #99FFFF;
  font-weight: normal;
  padding: 5px 15px;
  border-radius: 5px;
}
.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
}
.menu button {
  width: 50%;
  height: 50px;
  line-height: 50px;
  margin-bottom: 15px;
  border-radius: 10px;
  font-size: 20px;
  padding: 0;
  background-color: #66CCCC;
}
</style>
